<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>函数的防抖与节流</title>
    <style>
        .scroll-hei {
            height: 2000px;
            background-color: skyblue;
            width: 500px;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    函数防抖与节流：<input type="text" id="input">
    <div class="scroll-hei">

    </div>
    <script>

function realFunc() {
            console.log('success1');
        }

        // 防抖函数
        function debounce(func, wait) {
            let timeout;
            return function () {
                clearTimeout(timeout);
                timeout = setTimeout(func, wait);
            }
        }
      

        // 节流函数
        function throttle(func, interval) {
            let timeout;
            let startTime = new Date();
            return function () {
                clearTimeout(timeout);
                let curTime = new Date();
                if (curTime - startTime <= interval) {
                    //小于规定时间间隔时，用setTimeout在指定时间后再执行
                    timeout = setTimeout(() => {
                        func();
                    }, interval)
                } else {
                    //重新计时并执行函数
                    startTime = curTime;
                    func()
                }
            }
        }

        window.addEventListener('scroll', throttle(realFunc, 1000));

        const input = document.getElementById('input');
        // input.addEventListener('keydown', debounce(realFunc, 1000));
        input.addEventListener('keydown', throttle(realFunc, 1000));
        //input.addEventListener('keydown',realFunc);
        // window.addEventListener('scroll',realFunc);

        /*
        函数防抖:
            规定函数至少间隔多久执行。
            函数执行过一次后，在n秒内不能再次执行，否则推迟函数执行
            下一次函数调用将清除上一次的定时器，并用setTimeout重新计时。（窗口大小改变，验证用户输入）
    
        函数节流：
        规定函数在某时间段内最多执行一次
            函数在n秒内最多执行一次
           下一次函数调用将清除上一次的定时器
                若函数执行的时间间隔小于等于规定时间间隔则用setTimeout在规定时间后再执行
                若函数执行的时间间隔大于规定时间间隔则执行函数，并重新计时
        

        总结：
        1、当我们只需要处理最后一次触发事件时，用函数防抖。如窗口大小值变化时并不需要计算中间变化的过程，只需要窗口大小改变完成后的值
        2、当事件触发过于频繁，我们需要限制事件处理程序的调用频率时，用函数节流。

        目的:优化高频率事件

        相同：都是防止某一时间段内，函数被频繁调用执行，通过时间频率控制，减少回调函数执行次数，来实现相关性能优化。
        区别：“防抖”是某一时间内只执行一次，最后一次触发后过段时间执行，而“节流”则是间隔时间执行，间隔时间固定。(最重要的结论)
        */

        

    </script>
</body>

</html>